/*
 * Copyright (c) 2025 Huawei Device Co., Ltd.
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

import {useBreakpointValue} from '@hadss/react_native_adaptive_layout';
import React from 'react';
import {View, Text, StyleSheet, TouchableOpacity, Image} from 'react-native';

const TabButtom = (props: {currentBp: string, type: number}): JSX.Element => {
  const {type} = props;

  const data = [
    {
      id: 'nav_1',
      url: require('../../../../assets/pngs/nav_1.png'),
      title: '首页',
    },
    {
      id: 'nav_2',
      url: require('../../../../assets/pngs/nav_2.png'),
      title: '动态',
    },
    {
      id: 'nav_3',
      url: require('../../../../assets/pngs/nav_3.png'),
      title: '会员购',
    },
    {
      id: 'nav_4',
      url: require('../../../../assets/pngs/nav_4.png'),
      title: '我的',
    },
  ];

  let navBottom = useBreakpointValue({
    base: 30,
    sm: 30,
    md: 34,
    lg: 50,
    xl: 50,
  });

  const BottomTabItem = ({icon, title, index}): JSX.Element => (
    <TouchableOpacity
      style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}
      onPress={(): void => console.log('Tab pressed')}>
      <Image style={styles.bottomImg} source={icon} />
      <Text
        style={[index === 0 ? styles.bottomTitleActive : styles.bottomTitle]}>
        {title}
      </Text>
    </TouchableOpacity>
  );

  return (
    <View
      style={[
        type === 2 ? styles.bottomWrap : styles.bottomWrapLg,
        {paddingBottom: navBottom},
      ]}>
      {data.map((tab, index) => (
        <BottomTabItem
          key={`tab-${index}`}
          icon={tab.url}
          title={tab.title}
          index={index}
        />
      ))}
    </View>
  );
};

const styles = StyleSheet.create({
  bottomWrap: {
    flexDirection: 'row',
    backgroundColor: 'rgba(241, 243, 245, 0.8)',
    paddingVertical: 10,
    zIndex: 11,
  },
  bottomWrapLg: {
    flexDirection: 'column',
    height: '100%',
    backgroundColor: 'rgba(241, 243, 245, 0.8)',
    justifyContent: 'center',
    zIndex: 11,
  },
  bottomTitleActive: {
    color: '#fe8d00',
    fontSize: 10,
  },
  bottomItem: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  bottomImg: {
    width: 24,
    height: 24,
  },
  bottomTitle: {
    color: 'rgba(0, 0, 0, 0.6)',
    fontSize: 10,
  },
});

export default TabButtom;
